<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%-- <%@page import="com.starbaba.worthbuying.model.WorthBuyingCategoryVO"%> --%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@page import="com.google.gson.JsonArray"%>
<%@page import="com.google.gson.JsonObject"%>

<!DOCTYPE html>
<html lang="en">
<head>
	<%@ include file="/common/common-css.jsp" %>
	<style>
		.table > th {
		  vertical-align: center;
		  background-color: grey;
	}
	</style>		
</head>
<body class="no-skin">
	<div class="page-content">
		<div class="page-content-area">
			<div class="row">
				<div class="col-xs-12 col-sm-12 widget-container-col">
					<div class="widget-box widget-color-blue">
						<div class="widget-header widget-header-small">
							<h6 class="widget-title lighter">
								<i class="ace-icon glyphicon glyphicon-th-list"></i>品牌信息
							</h6>
                            <div class="widget-toolbar no-border">
								<a href="#" data-action="collapse">
									<i class="ace-icon fa fa-chevron-up"></i>
								</a>
							</div>
						</div>
						
						<div class="widget-body">
							<div class="widget-main" >
								<form id="model" class="form-horizontal"  name="product-form" method="post" >
									<input type="hidden" name="model_id"  id="model_id" placeholder="" class="col-xs-12 col-sm-6">									
									<div id="product_comment">
											<button type="button" name="btn-add" class="btn btn-primary btn-sm no-border" onclick="addProductComment()">
														<i class="ace-icon glyphicon glyphicon-plus bigger-110"></i>添加属性</button>
											<button type="button" name="btn-add" class="btn btn-primary btn-sm no-border" onclick="saveSort()">
														<i class="ace-icon glyphicon glyphicon-plus bigger-110"></i>保存排序</button>			

										<div style="text-align: left">
											<label for="from">模板名称</label><br> <input type="text"
												name="modelName" id="modelName" placeholder=""
												class="col-xs-12 col-sm-12" value="">
										</div>
										<br>
										<div>
											<label for="from">模板备注</label><br> <input type="text"
												name="modelRemark" id="modelRemark" placeholder=""
												class="col-xs-12 col-sm-12"
												value="">
										</div>
										<br>
										<div>
											<label for="from">跳转链接</label><br> <input type="text"
												name="target_url" id="target_url" placeholder=""
												class="col-xs-12 col-sm-12"
												value="">
										</div>
										<br>
										<div>
											<label for="from">模板类型</label><br> <select
												class="form-control" name="modelType" id="modelType">
												<option value="0">贷款活动</option>
												<option value="1">信用卡活动</option>
												<option value="2">单图文模板</option>
											</select> 
										</div>
										
										<table name="commentList" id="commentList" class="table table-bordered table-striped table-hover table-condensed table-responsive">
											<tr>
												<th style="width:2%">排序</th>
												<th style="width: 10%">title</th>
												<th style="width: 10%">key名称</th>
												<th style="width: 10%">类型</th>
												<th style="width: 20%">备注</th>
											</tr>
                       						<tr class="dataRow"></tr>
										</table>
										<input type="hidden" name="commentListValue" id="commentListValue"/>	
										<input type="hidden" name="index" id="index" value=""/>	
										<input type="hidden" name="id" id="id" value=""/>	
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
	
			<div class="clearfix form-actions">
				<div class="col-md-offset-3 col-md-9">
					<button class="btn  btn-inverse  no-border " onclick="doCancle()" id="delete"> 
						<i class="ace-icon fa fa-undo bigger-160"></i>
						取消
					</button>
					&nbsp; &nbsp; &nbsp;
					<button id="btn-save" name="btn-save" class="btn  btn-success  no-border" type="button" onclick="doSave()">
						<i class="ace-icon fa fa-floppy-o bigger-160"></i>
						保存
					</button>
			  </div>
		  </div>
	    </div>
	</div>
    <%@ include file="/common/common-js.jsp"%>
    <%@ include file="/discovery/maxlength.jsp"%>
    <script type="text/javascript" src="${ctx}/ace/js/maxlength.js"></script>
    <script type="text/javascript" src="${ctx}/js/wangEditor-1.3.11.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
    <script type="text/javascript" src="${ctx}/js/call_func.js"></script>
    <script>
		var index = 0 ;
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return decodeURI(r[2]); return null;
		}
		var id=getQueryString("id");
		
		$(function(){	
			$("#model_id").val(id);
			$("#btn-save").removeAttr("disabled");
			$(".dataRow").remove();
			if(id!=null){
				makeDate(id);
			}
			
		    $('#commentList').delegate('.glyphicon-chevron-up','click',function(){
				var arr = new Array();
				var thispos=$(this).parent('td').parent('tr');
				var thishtml=thispos.clone();
				var prevpos=$(this).parent('td').parent('tr').prev();
				var thisindex = thispos.index();
				if(thisindex==0){
					$('.discovery-up').show();
					setTimeout("$('.discovery-up').hide()",3000);
				}else{
	
					thispos.remove();
					prevpos.before(thishtml);
					$('#commentList tr').each(function(){
						arr.push($(this).find('td:nth-child(1)').find('.glyphicon-chevron-up').attr('data-tabindex'));
					});
					var arrstring = arr.join("#");
					console.log(arrstring);
					 /* $.ajax({
						url: ctx+'/cps/sortTab.action',
						type: 'POST',
						dataType: 'json',
						data: {"prdSortList": arrstring},
						success:function(data){
	                        console.log(data);
						},
						error:function(){
							console.log('排序失败');
						}
					});  */
					
	
				}
			});
	        //下移
			$('#commentList').delegate('.glyphicon-chevron-down','click',function(){
				var arr = new Array();
				var thispos=$(this).parent('td').parent('tr');
				var thishtml=thispos.clone();
				var nextpos=$(this).parent('td').parent('tr').next();
				var thisindex = thispos.index();
				if(thisindex==$("#jquery-table tbody tr").length - 1){
					$('.discovery-down').show();
					setTimeout("$('.discovery-down').hide()",3000);
				}else{
					thispos.remove();
			        nextpos.after(thishtml);
					$('#commentList tr').each(function(){
						arr.push($(this).find('td:nth-child(1)').find('.glyphicon-chevron-up').attr('data-tabindex'));
					});
					var arrstring = arr.join("#");
					/*  $.ajax({
						url: ctx+'/cps/sortTab.action',
						type: 'POST',
						dataType: 'json',
						data: {'prdSortList': arrstring},
						success:function(data){
	                        console.log(data);
						},
						error:function(){
							console.log('排序失败');
						}
					}); */ 
					
				}
			});
		});
	
		function saveSort(){
			var i = 0;
			$("input[name^=name]").each(function(){
				$(this).attr("id","name"+i);
				$(this).attr("name","name"+i);
				i++
			});
			i=0;
			$("input[name^=content]").each(function(){
				$(this).attr("id","content"+i);
				$(this).attr("name","content"+i);
				i++
			});
			i=0;
			$("select[name^=type]").each(function(){
				$(this).attr("id","type"+i);
				$(this).attr("name","type"+i);
				i++
			});
			i=0;
			$("input[name^=remark]").each(function(){
				$(this).attr("id","remark"+i);
				$(this).attr("name","remark"+i);
				i++
			});
			
			doSave();
		}
	
		
	/* 	var row = $("#commentList tr").length;
	    var html = '<tr class="dataRow"><td><input type ="text"  class="commentName" id="content" name="content"  style="width:90%;" value=" "></td>' +
			'<td><input type ="text"  class="commentName" id="name" name="name"  style="width:90%;" value=" "></td>'+
			'<td><textarea rows="4" name="value" id="value" cols="100"></textarea></td>'+
			'<td><input type ="text"  class="commentName" id="memo" name="memo"  style="width:90%;" value="无"></td>'+
			'<td><input type ="text"  class="commentName" id="sp" name="sp"  style="width:90%;" value="*"></td>'+
			'<td class="ingore"><button type="button" class="btn btn-primary savepost" onclick="deleteProductComment(this)">删除</button></td><input type="hidden"></tr>';
	   
			var $tr=$("#commentList tbody tr").eq(row - 1);
	    $tr.after(html); */
		
	
	    
		function makeDate(id){
			var url=ctx + "/activitymodule/getModelData.action";
			 $.ajax({
				"url":url ,
				"type": "POST",
				"dataType": 'json',
				"data":  {"id":id},
				"beforeSend": function(){
				},
				"success": function(data){
					var modelName = data.ActivityModel.modelName;
					var modelRemark = data.ActivityModel.modelRemark;
					var modelType = data.ActivityModel.modelType;
					var target_url = data.ActivityModel.target_url;
					
					var id = data.ActivityModel.id;
					jQuery("#modelName").val(modelName);
					jQuery("#modelRemark").val(modelRemark);
					jQuery("#target_url").val(target_url);
					
					jQuery("#id").val(id);
					$("select[name='modelType']").find(
							"option[value='" + modelType + "']").attr("selected",
							true);
					if(data.itemList.length > 0 ){
						var html="";
		            	$.each(data.itemList, function(i, item){
		            		var opention = returnType(item.type);
		            		var remark = item.remark;
		            		if(remark==null){
		            			remark ="";
		            		}
		            		 html += '<tr class="dataRow">'+
		            		    '<td><i class="glyphicon glyphiconfir glyphicon-chevron-up" data-tabindex=""></i><br><i class="glyphicon glyphicon-chevron-down"></i></td>'+
		            		 	'<td><input type ="text"  class="commentName" id="name'+i+'" name="name'+i+'" style="width:90%;" value="'+item.name+'"></td>' +
		            			'<td><input type ="text"  class="commentName" id="content'+i+'" name="content'+i+'"  style="width:90%;" value="'+item.content+'"></td>'+											  
		            			'<td> <select name="type'+i+'">'+opention+'</select></td>'+		            			
		            			'<td><input type ="text"  class="commentName" id="remark'+i+'" name="remark'+i+'"  style="width:90%;" value="'+remark+'"></td>'+
		            			//'<td class="ingore"><button type="button" class="btn btn-primary savepost" onclick="deleteProductComment(this)">删除</button><td>'+
		            			'</tr>';
		            		 index++;
		            	});
		            	//"<td class='ingore'><button type='button' class='btn btn-primary savepost' onclick='deleteProductComment(this)'>删除</button><td>&nbsp;&nbsp;"+
		            	var row = $("#commentList tr").length;
		            	var $tr=$("#commentList tbody tr").eq(row - 1);
		            	$tr.after(html);
		            };
				},
				"error": function(){
					alert("操作失败");								 
				},
				"complete": function(){
					//解除事件
					
				}
			});
		}
	    
		function returnType(type){
			var opention;
				if(type ==0){
					opention = '<option  value="0">输入框</option>';
				}else if(type ==1){
					opention= '<option  value="1">图片</option>';
				}else if(type ==2){
					opention=	 '<option  value="2">图文</option>';
				}else if(type ==3){
					opention= '<option  value="3">时间</option>';
				}else if(type ==4){
					opention=	 '<option  value="4">单选框</option>';	
				}else if(type ==5){
					opention=	 '<option  value="5">列表1</option>';	
				}else if(type ==6){
					opention=	 '<option  value="6">列表2</option>';	
				}else if(type == 7){
					opention=	 '<option  value="7">列表3</option>';
				}
			return opention;
		}
		
		function doCancle() {
			
			try {
		      	if(parent) {
		        parent.parent['__extdialog_active'].dialog('close');
		      }
		    } catch(e) {
		      window.history.back();
		    }
		} 
	
			
		
		function deleteSource(row) {
			
			var index = $(row).parent().parent().find('.rowIndex').text();
			var $tr = $("#sourceList tr").eq(index);
			$tr.remove();
			
			$("#sourceList tbody tr .rowIndex").each(function(trindex,tritem){
				$(tritem).text(trindex + 1);
			});
		}
	
	
	function doSave() {
		$("#index").val(index);
		saveForm();
	}
	
	function saveForm() {
		var saveUrl;
		if(id!=""){
			saveUrl = ctx + "/activitymodule/editModule.action";
		}else{
			saveUrl = ctx + "/activitymodule/saveModule.action";
		}
		
		var options = {
			url : saveUrl,
			type : "POST",
			dataType : "json",
			beforeSend : function() {
				$(".load_bg,.load_img").show();
			},
			success : function(data) {
				alert("保存成功")
				parent.parent['__extdialog_active'].dialog('close');
				parent.query_any();
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert(textStatus);
				console.log(XMLHttpRequest, textStatus, errorThrown);
			},
			complete : function() {
				$(".load_bg,.load_img").hide();
			}
		};
		$('form[name="product-form"]').ajaxSubmit(options);
	}
	
	
	
	function addProductComment() {
		
		var row = $("#commentList tr").length;
	    var html = '<tr class="dataRow">'+
	    	'<td><i class="glyphicon glyphiconfir glyphicon-chevron-up" data-tabindex=""></i><br><i class="glyphicon glyphicon-chevron-down"></i></td>'+
	    	'<td><input type ="text"  class="commentName" id="name'+index+'" name="name'+index+'" style="width:90%;" value=""></td>' +
			'<td><input type ="text"  class="commentName" id="content'+index+'" name="content'+index+'"  style="width:90%;" value=""></td>'+											  
			'<td> <select name="type'+index+'" onchange="selClick(this)">  <option  value="0">输入框</option><option  value="1">图片</option><option  value="2">图文</option>'+
			'<option  value="3">时间</option><option  value="4">单选框</option><option  value="5">列表1</option>'+
			'<option  value="6">列表2</option><option  value="7">列表3</option></select></td>'+
			'<td><input type ="text"  class="commentName" id="remark'+index+'" name="remark'+index+'"  style="width:90%;" value=""></td>'+
			//'<td class="ingore"><button type="button" class="btn btn-primary savepost" onclick="deleteProductComment(this)">删除</button><td>'+
			'</tr>';//+
			//'<td class="ingore"><button type="button" class="btn btn-primary savepost" onclick="deleteProductComment(this)">删除</button></td><input type="hidden"></tr>';
	   
			var $tr=$("#commentList tbody tr").eq(row - 1);
	    $tr.after(html);
	    index++;
	}
	
	function selClick(obj){
		$(obj).find("option:selected").attr("selected",true);
	}
	
	function deleteProductComment(row) {
		
		var $tr = $(row).parent().parent();
		$tr.remove();
	}
	
	function editProductComment(row){
		var tr = $(row).parent().parent();
		$(tr).find("input").each(function(){
			$(this).removeAttr("readonly");
		});
		$(tr).find("textarea").removeAttr("readonly");
	}
	
	function view(id){
		 var url = "/module/view.action?id="+id;
		url = encodeURI(url); 
		openDialogWithRand("/module/moduleView.jsp?id="+id,1000,1000,"预览信息",function (data){});
	}
  </script>	
</body>
</html>
